.x-top {
    width: 100%;
    height: 20%;
}

.x-top p {
    font-size: 44px;
    font-weight: 800;
    text-align: center;
    padding-top: 100px;
    font-family: 微软雅黑;
    margin-bottom: 30px;
}

.container {
    width: 70%;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: 10px;
}

.box {
    flex: 1 1 calc(28.33% - 10px);
    height: 200px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    /* 改为纵向排列以支持图片和文本 */
    align-items: center;
    justify-content: center;
    transition: flex 0.8s ease, background-color 1s ease;
    text-align: center;
    border-radius: 8px;
    position: relative;
    /* 便于定位图片 */
    overflow: hidden;
    /* 防止内容溢出 */
}

h1 {
    width: 100%;
    transition: transform 0.5s ease-out;
    transform: translateY(100%);
}

.box:hover {
    background-color: #fff;
}

.hovered {
    flex: 3 1 calc(34% - 10px);
}

.slide-up {
    transform: translateY(0);
}